import {Navigate} from "react-router-dom";
import React from "react";
import NotFound from "./pages/404";
import Book from "./pages/projects/Book";
import Computer from "./pages/projects/Computer";
import Projects from "./pages/projects";
import Login from "./pages/login";
import LoginMobile from "./pages/LoginMobile";
import Index from "./pages/projects/Fruits";

// 分包，需要在index中增加 Suspense
const Detail = React.lazy(() => import('./pages/projects/Fruits/Detail'));

const projects = [
    {path: '', element: <Navigate to='book'/>},
    {showNav: true, name: 'Book', path: 'book', element: <Book/>},
    {showNav: true, name: 'Computer', path: 'computer', element: <Computer/>},
    {showNav: true, name: 'Fruits', path: 'fruits', element: <Index/>},
]

const routes = [
    {path: '/', element: <div>Root</div>},
    {path: '*', element: <NotFound/>},
    {path: '/fruit/detail/:id', element: <Detail/>},
    {showNav: true, name: 'Home', path: '/home', element: <div>Home</div>},
    {
        showNav: true,
        name: 'Project',
        path: '/project',
        children: projects,
        element: <Projects projects={projects}/>
    },
    {showNav: true, name: 'Login', path: '/login', element: <Login/>},
    {showNav: true, name: 'LoginMobile', path: '/loginMobile', element: <LoginMobile/>},
]
export default routes;